<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>注册</title>       
    <!-- Bootstrap core CSS -->
    <link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/js/jquery-1.7.2.js}"></script>

    <!-- Custom styles for this template -->
    <link  th:href="@{/css/signin.css}" rel="stylesheet">
    <script type="text/javascript">
            $(function () {
                $("#saveBtn").click(function () {
                    if ($("#saveUsername").hasClass("is-invalid") || $("#saveEmail").hasClass("is-invalid") || $("#saveBirth").hasClass("is-invalid") ||
                        $("#saveCode").hasClass("is-invalid")) {
                        return false;
                    }else {
                        var param = $("#registerForm").serialize();
                        $.ajax({
                            url:"/user/register",
                            data:param,
                            type:'POST',
                            success:function (result) {
                                alert(result.msg);
                                location.href="http://localhost:8080/";
                            }
                        })
                    }
                })

                //发送ajax请求进行验证码校验
                $("#saveCode").change(function () {
                    var saveCode = $("#saveCode");
                    var params=$('#saveCode').serialize()
                    saveCode.removeClass("is-invalid");
                    $.ajax({
                        url:'/register/checkCode',
                        type: 'GET',
                        data: params,
                        success:function (result) {
                            if (result.codeMsg != null){
                                saveCode.addClass("is-invalid");
                                saveCode.next().next().text(result.codeMsg);
                                saveCode.val("")
                                return false;
                            }
                        }
                    })
                })

                //用ajax发送请求校验用户名是否可用
                $("#saveUsername").change(function () {
                    var params=$('#saveUsername').serialize()
                    let saveUsername = $("#saveUsername");
                    var usernameRegex = /^[-_a-zA-Z0-9]{4,16}$/;
                    var val = saveUsername.val();
                    saveUsername.removeClass("is-valid is-invalid")
                    saveUsername.next("div").removeClass("invalid-feedback valid-feedback")
                    saveUsername.next("div").text("");
                    if (usernameRegex.test(val)) {
                        $.ajax({
                            url:'/register/checkUsername',
                            type:'GET',
                            data:params,
                            success:function (result) {
                                if (result.msg != null){
                                    saveUsername.addClass("is-invalid");
                                    saveUsername.next("div").addClass("invalid-feedback");
                                    saveUsername.next("div").text(result.msg);
                                    return false;
                                }else{
                                    saveUsername.addClass("is-valid");
                                    saveUsername.next("div").addClass("valid-feedback");
                                    saveUsername.next("div").text(result.successInfo);
                                }
                            }
                        })
                    } else {
                        saveUsername.addClass("is-invalid");
                        saveUsername.next("div").addClass("invalid-feedback");
                        saveUsername.next("div").text("用户名的格式（4到16位,字母,数字,下划线,减号）");
                        return false;
                    }
                })

                //密钥前端校验
                $("#saveKey").change(function () {
                    let saveKey = $("#saveKey");
                    let key = saveKey.val();
                    if (key === "2020") {
                        saveKey.removeClass("is-invalid is-valid");
                        saveKey.next("div").text("");
                    } else {
                        saveKey.addClass("is-invalid");
                        saveKey.next("div").text("请输入正确的密钥");
                        return false;
                    }
                })



                //密码表单验证
                $("#savePassword1").change(function () {
                    let savePassword1 = $("#savePassword1");
                    let password1 = savePassword1.val();
                    var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
                    if (passwordRegex.test(password1)){
                        savePassword1.removeClass("is-invalid is-valid");
                        savePassword1.next("div").text("");
                    }else {
                        savePassword1.addClass("is-invalid");
                        savePassword1.next("div").text("密码至少8-16个字符,1个大写字母,1个小写字母和1个数字");
                    }
                })
                $("#savePassword2").change(function () {
                    let savePassword1 = $("#savePassword1");
                    let password1 = savePassword1.val();
                    let savePassword2 = $("#savePassword2");
                    let password2 = savePassword2.val();
                        if (password1 === password2){
                            savePassword2.removeClass("is-invalid is-valid");
                            savePassword2.next("div").text("");
                        }else{
                            savePassword2.addClass("is-invalid");
                            savePassword2.next("div").text("两次输入的密码不一致，请重新输入");
                            savePassword2.val("");
                        }
                })

                //邮箱表单验证
                $("#saveEmail").change(function () {
                    let saveEmail = $("#saveEmail");
                    let val = saveEmail.val();
                    var regExpEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
                    if (regExpEmail.test(val)) {
                        saveEmail.removeClass("is-invalid is-valid");
                        saveEmail.next("div").text("");
                    } else {
                        saveEmail.addClass("is-invalid");
                        saveEmail.next("div").text("请输入正确的邮箱格式");
                        return false;
                    }
                })

                $("#back").click(function () {
                    location.href="http://localhost:8080/";
                })

            })
    </script>

</head>
    <body>

        <div class="container">
            <form id="registerForm">

                <div class="offset-5 col-sm-1">
                    <svg xmlns="http://www.w3.org/2000/svg" width="9em" height="9em" viewBox="0 0 2000 2200"><path fill="#b22c2c" d="M0 1122l5-11.5q5-11.5 10-29.5t7-39q2-21-3-41-7-26-13.5-57T1 887.5Q3 862 21 852q26-12 51.5-7t48.5 14q1 0 2 1 10 3 22 8 26 10 56.5 21t57.5 18q34 9 61.5 2.5T356 875q8-28 31-43.5t48-21.5q9-3 20-5 22-4 41-13.5t24-32.5q2-21 12-57t39.5-81.5Q601 575 661 527q89-67 149-103 63-38 97-72 21-24 32.5-45.5t15.5-35l4-13.5 3 23q3 23-4.5 61.5T921 428q-27 41-50 65t-43 42q-27 23-51 53-20 28-31.5 53.5t-15.5 42l-4 16.5 72-13 4.5-21.5q4.5-21.5 21-53T875 551q27-22 58.5-29t59.5-5.5q28 1.5 46.5 6.5l18.5 5-16 1.5q-16 1.5-37.5 7t-42 16.5Q942 564 932 583q-11 26 0 50.5t40 36q29 11.5 70-1.5 30-10 57-32t55-49q28-28 60-54.5t72-45.5q54-23 104.5-22.5t83.5 9.5l33 9-29 1q-29 1-67.5 11t-70.5 34q-23 19-38 40t-29 45q-14 25-34 54t-52 63q-46 44-108 71.5t-110.5 40L920 855l20.5 10q20.5 10 58 20t88.5 13q50 1 90.5-10t64.5-23l24-12-9 15.5q-9 15.5-28.5 37.5t-50 42.5Q1148 969 1105 980q-58 13-99.5 10t-64-11.5L919 970l13 18.5q13 18.5 41 42t74 41.5q70 25 139.5 65t118.5 102q31 42 42.5 76t11.5 54v20l-14-20.5q-14-20.5-39.5-48.5t-59.5-52q-103-71-255-109-39-11-69.5-33.5t-52-47q-21.5-24.5-33-42L825 1019l-1 11.5q-1 11.5.5 29.5t6.5 38q7 20 16.5 33.5t17.5 21l8 7.5-30-4.5q-30-4.5-73-.5-27 4-46.5 11.5t-30 14.5l-10.5 7 33.5-2q33.5-2 83.5 4.5t102 30.5q37 19 59.5 42.5t34 45.5q11.5 22 15 36.5l3.5 14.5-14.5-17q-14.5-17-39.5-38t-57-35.5q-32-14.5-67-11.5-68 8-104 24.5t-59 35.5q-51 37-117 45-32 4-60 17.5t-48 41.5q-13 20-17.5 35.5t-5 24.5l-.5 9-24-7.5q-24-7.5-58-24.5t-67.5-45.5Q242 1385 221 1343q-25-57-32.5-100.5t-5-69l2.5-25.5 17.5 16.5q17.5 16.5 44 37t53.5 36q27 15.5 46 15.5 15-1 23-9t11-19.5q3-11.5 3-22.5t-1.5-18.5l-1.5-7.5 9.5 7.5q9.5 7.5 24 16.5t30.5 13.5q16 4.5 31-1.5 8-4 12.5-13t6-18.5q1.5-9.5 2-16.5l.5-7 12.5-5q12.5-5 29.5-15t31-25q14-16 21-31.5t9.5-26l2.5-10.5-13 14.5q-13 14.5-43 31.5-11 6-22 10t-18.5 6l-7.5 2-7-5.5q-7-5.5-15-16.5-3-4-6-9-4-9-9-13.5t-13 5.5q-5 7-8.5 20t-5 26.5q-1.5 13.5-2.5 23l-1 9.5-6.5-1.5q-6.5-1.5-17-6T386 1127q-16-14-22-23-5-6-9-9.5t-10-2.5q-12 1-19 60 0 11 1 22.5t3 19l2 7.5-27-16.5q-27-16.5-70-57.5-20-21-33-41-12-19-21-25.5t-18 9.5q-33 51-41 125-2 25 1 43t6.5 27.5l3.5 9.5-9.5-4.5q-9.5-4.5-23-13t-26-22Q62 1222 55 1203q-10-25-22.5-43T10 1132l-10-10zm408-188l18-3q18-3 50-2 22 1 42.5 3.5t34.5 5l14 2.5-3-2q-3-2-7-6t-6.5-10q-2.5-6-2.5-15 2-12 13-28t23-29.5q12-13.5 15-17.5-4 6-30 26t-67 35q-44 16-69 28.5L408 934zm591 904q0 31-28 43t-69 10.5q-41-1.5-82.5-9.5t-70-16l-28.5-8q-73-12-172 1.5T354.5 1898q-95.5 25-160.5 46.5l-65 21.5 57-32.5q57-32.5 138-74t159.5-73.5q78.5-32 121.5-32 58 0 106.5-12.5t86-29Q835 1696 859 1681q38-23 32.5-30t-61.5 17q-85 38-199 38-50 2-88 11.5t-59 19l-21 9.5 14-15q14-15 47-35.5t90-39.5q8-2 16-5 43-13 89.5-31.5t84-49Q841 1540 857 1493q11-39 6.5-68t-17-48q-12.5-19-23.5-29l-11-10 16-1q16-1 41 2.5t53 16.5q31 15 53 31 17 12 33 20.5t36 9.5q32-1 32.5-30t-14.5-60q-15-30-40-60t-49-49q-23-18-40-28l-17-10 44.5 10q44.5 10 108 34t126.5 64q61 41 101 80.5t59.5 66l19.5 26.5 8-23.5q8-23.5 11-63t-12-88.5q-22-68-80-120t-132-82q-70-28-99.5-45l-29.5-17 21-1q21-1 53-8t68.5-25q36.5-18 69.5-52 43-46 61.5-80t22.5-53l4-19-24.5 13q-24.5 13-60.5 28t-74 24q-56 12-96 12h-40l28.5-10.5Q1103 840 1144 818t80-58q8-7 15-14 52-52 104-83.5t140-31.5q65 1 115 21t79 40.5l29 20.5-21-5.5q-21-5.5-52.5-10T1566 696q-53 6-70.5 22t31.5 33q53 16 99.5 56.5T1695 909q13 41 14 74.5t-3.5 54l-4.5 20.5-11.5-24.5q-11.5-24.5-41-58T1567 912q-41-21-74.5-28.5t-36 6Q1454 903 1507 942q85 59 143 138.5t64 197.5q0 60-14 104.5t-33.5 74q-19.5 29.5-35 44L1616 1515l6-29q6-29 9.5-76t-2.5-102q-8-55-30.5-72.5t-43 0Q1535 1253 1531 1304q-1 49 6 97 8 49 8 110.5t-27 148.5q-22 64-54 106.5t-64 66q-32 23.5-54 33l-22 9.5 13.5-21q13.5-21 26-55.5t10.5-77q-2-42.5-32-86.5-27-36-68.5-41.5t-81 7.5q-39.5 13-61.5 29-33 24-75 77.5T999 1838zm302-738q33 30 68 42t56 0q19-13 11.5-42t-39.5-60q-33-31-68-43t-56 0q-20 14-12 42.5t40 60.5zm24 671l-.5-5q-.5-5-3.5-13t-10-15.5q-7-7.5-19-13.5t-31-7q-51-2-87.5 34.5T1137 1848q0 23 9 35.5t21.5 18q12.5 5.5 25 6t21.5-1l9-1.5-8.5 10q-8.5 10-24 21.5t-36 19q-20.5 7.5-45.5 4.5-32-7-44-42.5t-6-81.5q6-46 26-83 31-56 77.5-90t92.5-32q30 2 46 16.5t22 35q6 20.5 6.5 40.5t-2 34l-2.5 14z"></path>
                    </svg>
                </div>
                <strong class="offset-4 col-md-4">用户名</strong>
                <div class="offset-4 col-md-4 input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 0 0 .014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 0 0 .022.004zm9.974.056v-.002.002zM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                            </svg>
                        </span>
                    </div>
                    <input type="text"  id="saveUsername" name="username" class="form-control" placeholder="username" required>
                    <div class="invalid-feedback"></div>
                </div>

                <strong class="offset-4 col-md-4">密码</strong>
                <div class="offset-4 col-md-4 input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                          <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-lock" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M11.5 8h-7a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1zm-7-1a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-7zm0-3a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z"/>
                          </svg>
                        </span>
                    </div>
                    <input type="password" id="savePassword1" name="password" class="form-control" placeholder="password" required>
                    <div class="invalid-feedback"></div>
                </div>
                <strong class="offset-4 col-md-4">确认密码</strong>
                <div class="offset-4 col-md-4 input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                           <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-lock" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                             <path fill-rule="evenodd" d="M11.5 8h-7a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1zm-7-1a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-7zm0-3a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z"/>
                           </svg>
                        </span>
                    </div>
                    <input type="password" id="savePassword2" class="form-control" placeholder="password" required>
                    <div class="invalid-feedback"></div>
                </div>
                <strong class="offset-4 col-md-4">邮箱</strong>
                <div class="offset-4 col-md-4 input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                          <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-mailbox" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M4 4a3 3 0 0 0-3 3v6h6V7a3 3 0 0 0-3-3zm0-1h8a4 4 0 0 1 4 4v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a4 4 0 0 1 4-4zm2.646 1A3.99 3.99 0 0 1 8 7v6h7V7a3 3 0 0 0-3-3H6.646z"/>
                            <path fill-rule="evenodd" d="M11.793 8.5H9v-1h5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.354-.146l-.853-.854z"/>
                            <path d="M5 7c0 .552-.448 0-1 0s-1 .552-1 0a1 1 0 0 1 2 0z"/>
                          </svg>
                        </span>
                    </div>

                    <input id="saveEmail" type="email"  name="email" class="form-control" placeholder="email" required>
                    <div class="invalid-feedback"></div>
                </div>
                <strong class="offset-4 col-md-4">密钥</strong>
                <div class="offset-4 col-md-4 input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                           <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-key" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
                                <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                           </svg>
                        </span>
                    </div>
                    <input type="password" name="key" id="saveKey" class="form-control" placeholder="xxxx" required>
                    <div class="invalid-feedback"></div>
                </div>

                <strong class="offset-4 col-md-4">验证码</strong>
                <div class=" offset-4 col-md-4 input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                              <svg  width="1rem" height="1rem" xmlns="http://www.w3.org/2000/svg" name="zi_qrcode" viewBox="0 0 2000 2000"><path d="M1028 199v768h768V199h-768zm512 512h-256V455h256v256zM4 1991h768v-768H4v768zm256-512h256v256H260v-256zm1408-256h128v512h-384v-128h-128v384h-256v-768h384v128h256v-128zm0 640h128v128h-128v-128zm-256 0h128v128h-128v-128zM648 195h128v512H392V579H264v384H8V195h384v128h256V195zM392 835h128v128H392V835zm256 0h128v128H648V835z"/></svg>
                            </span>
                        </div>
                        <input type="text" id="saveCode" name="code" class="form-control"  required>
                        <img alt="验证码" onclick = "this.src='/defaultKaptcha?d='+new Date()*1" th:src="@{/defaultKaptcha}" />
                        <div class="invalid-feedback"></div>
                </div>
                <button id="saveBtn" class="btn btn-lg btn-primary offset-4 col-md-4" type="button" >注册</button>
                <br/>
                <br/>
                <button id="back" class="btn btn-lg btn-secondary offset-4 col-md-4" type="button" >返回登录</button>
            </form>
        </div>
    </body>
</html>